home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Menus / slide-in-links.izs < prev    next >
Text File  |  2005-09-02  |  9KB  |  286 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Slide-In Links
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION> Tuck away those links and make them visible only when needed with this script! A bar of links is slid out from the left edge of the window when the protruding part is clicked on. Great way to maximize realty space on your site.
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>drop down menus<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Insert the following code into the <head> section of your page: -->
  16. <style>
  17.  
  18. #divMenu {font-family:arial,helvetica; font-size:12pt; font-weight:bold}
  19. #divMenu a{text-decoration:none;}
  20. #divMenu a:hover{color:red;}
  21. </style>
  22. <script language="JavaScript1.2">
  23. /****************************************
  24. Submitted with modifications by Jack Routledge (http://fastway.to/compute) to DynamicDrive.com
  25. Copyright (C) 1999 Thomas Brattli @ www.dhtmlcentral.com
  26. This script is made by and copyrighted to Thomas Brattli 
  27. This may be used freely as long as this msg is intact!
  28. This script has been featured on http://www.dynamicdrive.com
  29. ****************************************
  30. Browsercheck:*/
  31. ie=document.all?1:0
  32. n=document.layers?1:0
  33. ns6=document.getElementById&&!document.all?1:0
  34.  
  35. //These are the variables you have to set:
  36.  
  37. //How much of the layer do you wan't to be visible when it's in the out state?
  38. lshow=60
  39.  
  40. //How many pixels should it move every step? 
  41. var move=10;
  42.  
  43. //At what speed (in milliseconds, lower value is more speed)
  44. menuSpeed=40
  45.  
  46. //Do you want it to move with the page if the user scroll the page?
  47. var moveOnScroll=true
  48.  
  49. /***************************************
  50. You should't have to change anything below this.
  51. ****************************************
  52. //Defining variables
  53.  
  54. var ltop;
  55. var tim=0;
  56.  
  57. //Object constructor
  58. function makeMenu(obj,nest){
  59.     nest=(!nest) ? '':'document.'+nest+'.'
  60.     if (n) this.css=eval(nest+'document.'+obj)
  61.     else if (ns6) this.css=document.getElementById(obj).style
  62.     else if (ie) this.css=eval(obj+'.style')                        
  63.     this.state=1
  64.     this.go=0
  65.         if (n) this.width=this.css.document.width
  66.         else if (ns6) this.width=document.getElementById(obj).offsetWidth
  67.         else if (ie) this.width=eval(obj+'.offsetWidth')
  68.     this.left=b_getleft
  69.     this.obj = obj + "Object";     eval(this.obj + "=this")    
  70. }
  71. //Get's the top position.
  72. function b_getleft(){
  73.         if (n||ns6){ gleft=parseInt(this.css.left)}
  74.         else if (ie){ gleft=eval(this.css.pixelLeft)}
  75.     return gleft;
  76. }
  77. /***********************************
  78. Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)
  79. ************************************
  80. function moveMenu(){
  81.     if(!oMenu.state){
  82.         clearTimeout(tim)
  83.         mIn()    
  84.     }else{
  85.         clearTimeout(tim)
  86.         mOut()
  87.     }
  88. }
  89. //Menu in
  90. function mIn(){
  91.     if(oMenu.left()>-oMenu.width+lshow){
  92.         oMenu.go=1
  93.         oMenu.css.left=oMenu.left()-move
  94.         tim=setTimeout("mIn()",menuSpeed)
  95.     }else{
  96.         oMenu.go=0
  97.         oMenu.state=1
  98.     }    
  99. }
  100. //Menu out
  101. function mOut(){
  102.     if(oMenu.left()<0){
  103.         oMenu.go=1
  104.         oMenu.css.left=oMenu.left()+move
  105.         tim=setTimeout("mOut()",menuSpeed)
  106.     }else{
  107.         oMenu.go=0
  108.         oMenu.state=0
  109.     }    
  110. }
  111. /*********************************
  112. Checking if the page is scrolled, if it is move the menu after
  113. **********************************
  114. function checkScrolled(){
  115.     if(!oMenu.go) oMenu.css.top=eval(scrolled)+parseInt(ltop)
  116.     if(n||ns6) setTimeout('checkScrolled()',30)
  117. }
  118. /*********************************
  119. Inits the page, makes the menu object, moves it to the right place, 
  120. show it
  121. **********************************
  122. function menuInit(){
  123.     oMenu=new makeMenu('divMenu')
  124.         if (n||ns6) scrolled="window.pageYOffset"
  125.         else if (ie) scrolled="document.body.scrollTop"
  126.     oMenu.css.left=-oMenu.width+lshow
  127.         if (n||ns6) ltop=oMenu.css.top
  128.         else if (ie) ltop=oMenu.css.pixelTop
  129.     oMenu.css.visibility='visible'
  130.     if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
  131. }
  132.  
  133.  
  134. //Initing menu on pageload
  135. window.onload=menuInit;
  136. </script>
  137. <!-- Step 2: Insert the following at the END of your document, right above the </BODY> tag: -->
  138. <div id="divMenu" style="position:absolute; top:250; left:30; visibility:hidden; background-color:F0F0F0">
  139. <nobr>
  140.     <a href="http://www.dynamicdrive.com">Dynamic Drive</a> -
  141.     <a href="http://www.codingforums.com">Coding Forums</a> - 
  142.     <a href="http://active-x.com/">Active-X.com</a> - 
  143.     <a href="javascript://" onclick="moveMenu()" style="background-color:yellow;text-decoration:none">MENU</a>
  144. </nobr>
  145. </div>
  146. <!-- END OF SCRIPT -->
  147. <!/SCRIPT>
  148.  
  149. <!PREVIEW>
  150. <!-- START OF SCRIPT -->
  151. <!-- Step 1: Insert the following code into the <head> section of your page: -->
  152. <style>
  153.  
  154. #divMenu {font-family:arial,helvetica; font-size:12pt; font-weight:bold}
  155. #divMenu a{text-decoration:none;}
  156. #divMenu a:hover{color:red;}
  157. </style>
  158. <script language="JavaScript1.2">
  159. /****************************************
  160. Submitted with modifications by Jack Routledge (http://fastway.to/compute) to DynamicDrive.com
  161. Copyright (C) 1999 Thomas Brattli @ www.dhtmlcentral.com
  162. This script is made by and copyrighted to Thomas Brattli 
  163. This may be used freely as long as this msg is intact!
  164. This script has been featured on http://www.dynamicdrive.com
  165. ****************************************
  166. Browsercheck:*/
  167. ie=document.all?1:0
  168. n=document.layers?1:0
  169. ns6=document.getElementById&&!document.all?1:0
  170.  
  171. //These are the variables you have to set:
  172.  
  173. //How much of the layer do you wan't to be visible when it's in the out state?
  174. lshow=60
  175.  
  176. //How many pixels should it move every step? 
  177. var move=10;
  178.  
  179. //At what speed (in milliseconds, lower value is more speed)
  180. menuSpeed=40
  181.  
  182. //Do you want it to move with the page if the user scroll the page?
  183. var moveOnScroll=true
  184.  
  185. /***************************************
  186. You should't have to change anything below this.
  187. ****************************************
  188. //Defining variables
  189.  
  190. var ltop;
  191. var tim=0;
  192.  
  193. //Object constructor
  194. function makeMenu(obj,nest){
  195.     nest=(!nest) ? '':'document.'+nest+'.'
  196.     if (n) this.css=eval(nest+'document.'+obj)
  197.     else if (ns6) this.css=document.getElementById(obj).style
  198.     else if (ie) this.css=eval(obj+'.style')                        
  199.     this.state=1
  200.     this.go=0
  201.         if (n) this.width=this.css.document.width
  202.         else if (ns6) this.width=document.getElementById(obj).offsetWidth
  203.         else if (ie) this.width=eval(obj+'.offsetWidth')
  204.     this.left=b_getleft
  205.     this.obj = obj + "Object";     eval(this.obj + "=this")    
  206. }
  207. //Get's the top position.
  208. function b_getleft(){
  209.         if (n||ns6){ gleft=parseInt(this.css.left)}
  210.         else if (ie){ gleft=eval(this.css.pixelLeft)}
  211.     return gleft;
  212. }
  213. /***********************************
  214. Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)
  215. ************************************
  216. function moveMenu(){
  217.     if(!oMenu.state){
  218.         clearTimeout(tim)
  219.         mIn()    
  220.     }else{
  221.         clearTimeout(tim)
  222.         mOut()
  223.     }
  224. }
  225. //Menu in
  226. function mIn(){
  227.     if(oMenu.left()>-oMenu.width+lshow){
  228.         oMenu.go=1
  229.         oMenu.css.left=oMenu.left()-move
  230.         tim=setTimeout("mIn()",menuSpeed)
  231.     }else{
  232.         oMenu.go=0
  233.         oMenu.state=1
  234.     }    
  235. }
  236. //Menu out
  237. function mOut(){
  238.     if(oMenu.left()<0){
  239.         oMenu.go=1
  240.         oMenu.css.left=oMenu.left()+move
  241.         tim=setTimeout("mOut()",menuSpeed)
  242.     }else{
  243.         oMenu.go=0
  244.         oMenu.state=0
  245.     }    
  246. }
  247. /*********************************
  248. Checking if the page is scrolled, if it is move the menu after
  249. **********************************
  250. function checkScrolled(){
  251.     if(!oMenu.go) oMenu.css.top=eval(scrolled)+parseInt(ltop)
  252.     if(n||ns6) setTimeout('checkScrolled()',30)
  253. }
  254. /*********************************
  255. Inits the page, makes the menu object, moves it to the right place, 
  256. show it
  257. **********************************
  258. function menuInit(){
  259.     oMenu=new makeMenu('divMenu')
  260.         if (n||ns6) scrolled="window.pageYOffset"
  261.         else if (ie) scrolled="document.body.scrollTop"
  262.     oMenu.css.left=-oMenu.width+lshow
  263.         if (n||ns6) ltop=oMenu.css.top
  264.         else if (ie) ltop=oMenu.css.pixelTop
  265.     oMenu.css.visibility='visible'
  266.     if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
  267. }
  268.  
  269.  
  270. //Initing menu on pageload
  271. window.onload=menuInit;
  272. </script>
  273. <!-- Step 2: Insert the following at the END of your document, right above the </BODY> tag: -->
  274. <div id="divMenu" style="position:absolute; top:250; left:30; visibility:hidden; background-color:F0F0F0">
  275. <nobr>
  276.     <a href="http://www.dynamicdrive.com">Dynamic Drive</a> -
  277.     <a href="http://www.codingforums.com">Coding Forums</a> - 
  278.     <a href="http://active-x.com/">Active-X.com</a> - 
  279.     <a href="javascript://" onclick="moveMenu()" style="background-color:yellow;text-decoration:none">MENU</a>
  280. </nobr>
  281. </div>
  282.  
  283. <!-- END OF SCRIPT -->
  284. <!/PREVIEW>
  285.  
  286. <!RELATED>NONE<!/RELATED>